<template>
  <div class="lb-edit-card">
    <top-nav :isBack="true" />
    <div class="page-main">
      <lb-classify-title :title="tips[1]"></lb-classify-title>
      <div style="height: 20px"></div>
      <el-form
        @submit.native.prevent
        :model="subForm"
        :rules="subFormRules"
        ref="aForm"
        label-width="180px"
        class="basic-form"
      >
        <el-form-item label="员工头像" prop="avatar">
          <lb-cover
            :fileList="subForm.avatar"
            @selectedFiles="getAvatar"
          ></lb-cover>
          <lb-tool-tips>图片建议尺寸：750 * 750</lb-tool-tips>
        </el-form-item>
        <el-form-item label="员工姓名" prop="name">
          <el-input
            class="long-item"
            v-model="subForm.name"
            maxlength="20"
            show-word-limit
            placeholder="请输入员工姓名"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-if="subForm.boss_permission"
          label="所属公司"
          prop="from_company_ids"
        >
          <el-row class="tag-box">
            <el-tag
              v-for="(tag, index) in subForm.from_company_ids"
              :key="index"
              closable
              @close="handleCloseTag(tag, index)"
            >
              {{ tag.name }}
            </el-tag>
            <el-button
              size="small"
              @click="showBossDialog"
              icon="el-icon-edit"
              type="warning"
              plain
              >修改</el-button
            >
          </el-row>
        </el-form-item>
        <el-form-item label="当前公司" prop="company_id">
          <el-cascader
            v-model="subForm.company_id"
            :options="authDataList"
            :props="{ checkStrictly: true, label: 'name', value: 'id' }"
            :show-all-levels="false"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="员工职位" prop="job_id">
          <el-select
            v-model="subForm.job_id"
            filterable
            clearable
            placeholder="请选择员工职位"
          >
            <el-option
              v-for="item in positionOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form
        @submit.native.prevent
        :model="subForm"
        :rules="subFormRules"
        ref="bForm"
        :inline="true"
        label-width="100px"
        class="relevant-form"
      >
        <el-form-item label="手机号" prop="phone">
          <el-input
            v-model="subForm.phone"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="座机号" prop="telephone">
          <el-input
            v-model="subForm.telephone"
            placeholder="座机号如：022-xxxxxxx"
          ></el-input>
        </el-form-item>
        <el-form-item label="400电话" prop="phone400">
          <el-input
            v-model="subForm.phone400"
            placeholder="请输入400电话"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="subForm.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="微信号" prop="wechat">
          <el-input
            v-model="subForm.wechat"
            placeholder="请输入微信号"
          ></el-input>
        </el-form-item>
        <el-form-item label="企业微信号" prop="ww_account">
          <el-input
            v-model="subForm.ww_account"
            placeholder="若有请输入"
          ></el-input>
          <lb-tool-tips
            >员工企业微信账号，当使用企业微信通知员工时，此条数据必填，否则消息无法通知成功</lb-tool-tips
          >
        </el-form-item>
      </el-form>
      <div style="height: 20px"></div>
      <lb-classify-title title="个人简介"></lb-classify-title>
      <div style="height: 20px"></div>

      <el-form
        @submit.native.prevent
        :model="subForm"
        :rules="subFormRules"
        ref="cForm"
        label-width="180px"
        class="upload-form"
      >
        <el-form-item label="语音介绍" prop="voice">
          <div class="upload-file-warp">
            <!-- <div class="upload-file-warp-content">{{subForm.voice ? subForm.voice :'选择语音文件'}}</div> -->
            <input
              type="text"
              class="choice-file-input"
              v-model="subForm.voice"
              placeholder="选择语音文件"
            />
            <lb-cover
              type="button"
              fileType="audio"
              @selectedFiles="getVoice"
            ></lb-cover>
          </div>
        </el-form-item>
        <el-form-item label="语音时长" prop="voice_time">
          <el-input
            class="item-short"
            v-model="subForm.voice_time"
            placeholder="请输入时长"
          ></el-input
          ><span>秒</span>
        </el-form-item>
      </el-form>
      <el-form
        @submit.native.prevent
        :model="subForm"
        :rules="subFormRules"
        ref="dForm"
        :inline="true"
        label-width="180px"
        class="basic-form"
      >
        <el-form-item label="个性签名" prop="desc">
          <el-input
            class="long-item"
            type="textarea"
            :rows="5"
            v-model="subForm.desc"
            placeholder="请输入个性签名"
          ></el-input>
        </el-form-item>
      </el-form>

      <div style="height: 20px"></div>
      <lb-classify-title title="我的照片"></lb-classify-title>
      <div style="height: 20px"></div>

      <el-form
        @submit.native.prevent
        :model="subForm"
        :rules="subFormRules"
        ref="eForm"
        label-width="180px"
        class="basic-form"
      >
        <el-form-item label="详情图" prop="images">
          <lb-cover
            type="more"
            :fileList="subForm.images"
            :fileSize="50"
            @selectedFiles="selectedFiles($event, 'images')"
            @moveFiles="moveFiles($event, 'images')"
          ></lb-cover>
          <lb-tool-tips>图片建议尺寸：750 * n</lb-tool-tips>
        </el-form-item>
        <el-form-item label="详情图链接" prop="my_url">
          <el-input
            class="long-item"
            v-model="subForm.my_url"
            placeholder="请输入详情图跳转链接"
          ></el-input>
          <lb-tool-tips
            >点击详情图片跳转网页，开启大图模式则展示大图</lb-tool-tips
          >
        </el-form-item>
      </el-form>

      <div style="height: 20px"></div>
      <lb-classify-title title="上传内容"></lb-classify-title>
      <div style="height: 20px"></div>
      <el-form
        @submit.native.prevent
        :model="subForm"
        :rules="subFormRules"
        ref="fForm"
        label-width="180px"
        class="basic-form"
      >
        <el-form-item label="视频封面" prop="my_video_cover">
          <lb-cover
            :fileList="subForm.my_video_cover"
            @selectedFiles="getVideoCover"
          ></lb-cover>
          <lb-tool-tips>图片建议尺寸: 600 * 400</lb-tool-tips>
        </el-form-item>
        <el-form-item label="视频链接" prop="my_video">
          <div class="upload-file-warp">
            <input
              type="text"
              class="choice-file-input"
              v-model="subForm.my_video"
              placeholder="选择视频文件"
            />
            <lb-cover
              type="button"
              fileType="video"
              @selectedFiles="getVideo"
            ></lb-cover>
          </div>
        </el-form-item>
        <el-form-item label="VR标题设置" prop="vr_tittle">
          <el-input
            class="long-item"
            v-model="subForm.vr_tittle"
            placeholder="请输入标题"
          ></el-input>
          <lb-tool-tips>{{ tips[2] }}</lb-tool-tips>
        </el-form-item>
        <el-form-item label="VR封面图" prop="vr_cover">
          <lb-cover
            :fileList="subForm.vr_cover"
            @selectedFiles="getVRCover"
          ></lb-cover>
          <lb-tool-tips>图片建议尺寸: 750 * 699</lb-tool-tips>
        </el-form-item>
        <el-form-item label="VR链接类型" prop="vr_switch">
          <el-radio-group v-model="subForm.vr_switch">
            <el-radio :label="1">网页</el-radio>
            <el-radio :label="0">小程序</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="vr_path">
          <el-input
            class="long-item"
            v-model="subForm.vr_path"
            :placeholder="
              subForm.vr_switch === 0 ? '请输入小程序appid' : '请输入网页链接'
            "
          ></el-input>

          <lb-tool-tips
            >小程序跳转链接输入格式如下:
            <div class="mt-md">
              1、跳转到小程序首页
              <div class="mt-md c-link">
                所需参数如下：
                <div class="mt-sm">[1] appId</div>
              </div>
              <div class="mt-md">例如：wx581f0c1732ae745f</div>
            </div>
            <div class="mt-lg">
              2、跳转到小程序指定页面
              <div class="mt-md c-link">
                所需参数如下：
                <div class="mt-sm">[1] appId</div>
                <div class="mt-sm">[2] ; (英文状态下的分号)</div>
                <div class="mt-sm">[3] 页面路径及参数</div>
              </div>
              <div class="mt-md">
                例如：wx581f0c1732ae745f;pages/user/home?key=1&staff_id=1
              </div>
            </div>
          </lb-tool-tips>
        </el-form-item>
      </el-form>

      <div style="height: 20px"></div>
      <lb-classify-title title="相关设置"></lb-classify-title>
      <div style="height: 20px"></div>
      <el-form
        @submit.native.prevent
        :model="subForm"
        :rules="subFormRules"
        ref="gForm"
        label-width="180px"
        class="basic-form"
      >
        <el-form-item label="分享标语" prop="share_text">
          <el-input
            class="long-item"
            v-model="subForm.share_text"
            :placeholder="tips[3]"
          ></el-input>
          <lb-tool-tips>
            自定义分享标题，仅员工分享自己的{{
              $t('menu.BusinessCard')
            }}有效。<br /><br />以 $name 或者 #我的名字# 代表姓名,<br />
            以 $company 或者 #公司# 代表公司简称, <br />以 $job 或者 #职位#
            代表职位 <br /><br />例如:
            您好，我是$company的$job$name，请惠存。<br />或者:
            您好，我是#公司#的#职位##我的名字#，请惠存。 <br /><br />如该{{
              $t('menu.BusinessCard')
            }}职位是：总经理；公司名称是：某科技有限公司；姓名是：张三；
            <br />分享标语则会变成:
            您好，我是某科技有限公司的总经理张三，请惠存。
          </lb-tool-tips>
        </el-form-item>
      </el-form>
      <el-form
        @submit.native.prevent
        :model="subForm"
        :rules="subFormRules"
        ref="hForm"
        :inline="true"
        label-width="100px"
        class="relevant-form"
      >
        <el-form-item label="虚拟靠谱数" prop="t_number">
          <el-input-number
            class="lb-input-number"
            v-model="subForm.t_number"
            :controls="false"
            :precision="0"
            :min="0"
            placeholder="请输入虚拟靠谱数"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="虚拟浏览数" prop="view_number">
          <el-input-number
            class="lb-input-number"
            v-model="subForm.view_number"
            :controls="false"
            :precision="0"
            :min="0"
            placeholder="请输入浏览人数"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="排序值" prop="top">
          <el-input-number
            class="lb-input-number"
            v-model="subForm.top"
            :controls="false"
            :precision="0"
            :min="0"
            placeholder="请输入排序值"
          ></el-input-number>
          <lb-tool-tips>值越大, 排序越靠前</lb-tool-tips>
        </el-form-item>
      </el-form>
      <el-form
        @submit.native.prevent
        :model="subForm"
        :rules="subFormRules"
        ref="iForm"
        label-width="180px"
        class="basic-form"
      >
        <el-form-item label="背景音乐" prop="bg">
          <div class="upload-file-warp">
            <input
              type="text"
              class="choice-file-input"
              v-model="subForm.bg"
              placeholder="选择音乐文件"
            />
            <lb-cover
              type="button"
              fileType="audio"
              @selectedFiles="getBgMusic"
            ></lb-cover>
          </div>
        </el-form-item>
        <el-form-item label="背景音乐设置" prop="bg_switch">
          <el-radio-group v-model="subForm.bg_switch">
            <el-radio :label="0">{{ $t('action.OFF') }}</el-radio>
            <el-radio :label="1">自动播放</el-radio>
          </el-radio-group>
          <lb-tool-tips>{{ tips[4] }}</lb-tool-tips>
        </el-form-item>

        <el-form-item>
          <lb-button @click="submitFormInfo" type="primary">{{
            $t('action.submit')
          }}</lb-button>
          <lb-button @click="goBack">{{ $t('action.back') }}</lb-button>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog title="权限设置" :visible.sync="dialogAuth" width="800px" center>
      <div class="auth-inner">
        <div class="auth-inner-box">
          <el-input
            v-model="filterTree"
            placeholder="请输入公司部门"
          ></el-input>
          <div class="data-box">
            <vue-scroll :ops="ops">
              <el-checkbox
                v-if="!filterTree"
                :indeterminate="isIndeterminate"
                v-model="checkTreeAll"
                @change="handleCheckTreeAllChange"
                >全选</el-checkbox
              >
              <el-tree
                :data="copyAuthDataList"
                node-key="id"
                default-expand-all
                @node-click="handleClickTreeNode"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                ref="tree"
              >
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span>{{ data.name }}</span>
                  <i
                    style="color: #09f"
                    :class="data.selected ? 'el-icon-success' : ''"
                  ></i>
                </span>
              </el-tree>
            </vue-scroll>
          </div>
        </div>
        <div class="auth-inner-box">
          <p>已选择的：</p>
          <div class="data-box">
            <vue-scroll :ops="ops">
              <div class="department">
                <p
                  v-for="(item, index) in dialogFilerTreeData"
                  :key="index"
                  class="department-item"
                >
                  <span><i class="el-icon-bank-card"></i> {{ item.name }}</span>
                  <i
                    class="el-icon-error"
                    @click="deletcompanyOrDepartment(item.id)"
                  ></i>
                </p>
              </div>
            </vue-scroll>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAuth = false">取 消</el-button>
        <el-button type="primary" @click="bossAuthConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  reg
} from '@/utils/reg'
export default {
  data () {
    return {
      tips: {
        1: `${this.$t('menu.BusinessCard')}信息`,
        2: `${this.$t('menu.BusinessCard')}详情页VR展示的版块的标题`,
        3: `您好，我是$company的$job$name，请惠存。`,
        // 3: `例如：你好，我是您的专属客户经理，这是我的${this.$t('menu.BusinessCard')}，请惠存`,
        4: `进入员工${this.$t('menu.BusinessCard')}后的背景音乐是否自动播放`
      },
      firstFlag: true,
      checkTreeAll: false,
      dialogAuth: false,
      filterTree: '',
      isIndeterminate: false,
      AuthTreeLength: 0,
      handleDeparmentData: [],
      dialogFilerTreeData: [], // 权限弹框右边的数据
      authDataList: [],
      copyAuthDataList: [],
      positionOptions: [],
      dialogVisible: false,
      disabled: false,
      // 基本信息
      subForm: {
        // 基本信息
        name: '',
        from_company_ids: [],
        boss_permission: false,
        company_id: [],
        job_id: '',
        // 相关信息
        phone: '',
        telephone: '',
        phone400: '',
        wechat: '',
        email: '',
        ww_account: '',
        t_number: '',
        view_number: '',
        top: 0,
        share_text: '',
        desc: '',
        // 上传信息
        avatar: [],
        my_url: '',
        images: [],
        bg: '',
        voice: '',
        voice_time: '',
        my_video: '',
        my_video_cover: '',
        vr_tittle: '',
        vr_cover: '',
        // 设置信息
        bg_switch: 0,
        vr_switch: 1,
        vr_path: ''
      },
      subFormRules: {
        // 基本信息验证
        name: {
          required: true,
          type: 'string',
          message: '请输入员工姓名',
          trigger: 'blur'
        },
        company_id: {
          required: true,
          type: 'array',
          message: '请选择当前公司',
          trigger: 'change'
        },
        from_company_ids: {
          required: true,
          type: 'array',
          message: '请选择所属公司',
          trigger: 'change'
        },
        job_id: {
          required: true,
          type: 'number',
          message: '请选择员工职位',
          trigger: 'change'
        },
        // 相关信息验证
        phone: {
          required: true,
          validator: reg.valiDateTel,
          trigger: 'blur'
        },
        // telephone: { validator: valiDatePhone, trigger: 'blur' },
        // phone400: { required: true, validator: reg.valiDatePhone400, trigger: 'blur' },
        wechat: {
          required: true,
          type: 'string',
          message: '请输入微信号',
          trigger: 'blur'
        },
        // t_number: {
        //   required: true,
        //   type: 'number',
        //   message: '请输入数字',
        //   trigger: 'blur'
        // },
        // view_number: {
        //   required: true,
        //   type: 'number',
        //   message: '请输入数字',
        //   trigger: 'blur'
        // },
        // top: {
        //   required: true,
        //   type: 'number',
        //   message: '请输入数字',
        //   trigger: 'blur'
        // },
        // share_text: {
        //   required: true,
        //   type: 'string',
        //   message: '请输入分享标语',
        //   trigger: 'blur'
        // },
        // desc: {
        //   required: true,
        //   type: 'string',
        //   message: '请输入个性签名',
        //   trigger: 'blur'
        // },
        // email: [{
        //   required: true,
        //   message: '请输入邮箱地址',
        //   trigger: 'blur'
        // },
        // {
        //   type: 'email',
        //   message: '请输入正确的邮箱地址',
        //   trigger: 'blur'
        // }
        // ],
        // 图片验证
        avatar: {
          required: true,
          type: 'array',
          message: '请上传图片',
          trigger: 'change'
        }
      },
      ops: {
        vuescroll: {
          wheelScrollDuration: 600
        },
        scrollPanel: {
          initialScrollY: false,
          initialScrollX: false,
          scrollingX: false,
          scrollingY: true,
          speed: 2000,
          easing: 'easeInOutQuart',
          verticalNativeBarPos: 'right'
        },
        rail: {},
        bar: {
          showDelay: 500,
          onlyShowBarOnScroll: false,
          keepShow: false,
          background: '#c1c1c1',
          opacity: 0.5,
          hoverStyle: false,
          specifyBorderRadius: false,
          minSize: false,
          size: '6px',
          disable: false
        }
      }
    }
  },
  created () {
    let {
      id
    } = this.$route.query
    if (id) {
      this.id = id
      this.getStaffCardInfo(id)
    }
  },
  methods: {
    /**
       * @method 详情数据回显
       */
    getStaffCardInfo (id) {
      this.$api.staffCardInfo({
        staff_id: id
      }).then(res => {
        if (res.code === 200) {
          let {
            data
          } = res
          this.positionOptions = data.job_list
          if (data.images && data.images.length) {
            data.images = data.images.map(item => {
              return {
                url: item
              }
            })
          } else {
            data.images = []
          }
          data.my_video_cover = data.my_video_cover ? [{
            url: data.my_video_cover
          }] : []
          data.avatar = [{
            url: data.avatar
          }]
          data.vr_cover = data.vr_cover ? [{
            url: data.vr_cover
          }] : []
          data.company_id = typeof data.company_ids === 'object' ? data.company_ids : [data.company_ids]
          let handleTreeDataResult = this.handleTreeDataToOrdinaryData(data.company_list)
          data.from_company_ids = handleTreeDataResult.companys
          for (let key in this.subForm) {
            this.subForm[key] = data[key]
          }
          this.handleTreeSelectedAndDisabled(data.company_list)
          this.authDataList = this.deepCopy(data.company_list)
          this.copyAuthDataList = this.deepCopy(data.company_list)
          this.AuthTreeLength = handleTreeDataResult.lens
          this.isIndeterminate = handleTreeDataResult.companys.length > 0 && handleTreeDataResult.companys.length <
            handleTreeDataResult.lens
        }
      })
    },

    /**
       * @method 处理层级数组为已选中的一维数组（所属公司的回显）
       */
    handleTreeDataToOrdinaryData (data, result = {
      companys: [],
      lens: 0
    }) {
      for (let i = 0, len = data.length; i < len; i++) {
        result.lens += 1
        if (data[i].selected) {
          result.companys.push(data[i])
        }
        if (data[i].children && data[i].children.length) {
          this.handleTreeDataToOrdinaryData(data[i].children, result)
        }
      }
      return result
    },

    /**
       * @method 处理树状数据的selected和disabled
       */
    handleTreeSelectedAndDisabled (data) {
      for (let i = 0, len = data.length; i < len; i++) {
        if (this.subForm.boss_permission) {
          data[i].disabled = !data[i].selected
          data[i].selected = !!data[i].selected
        } else {
          data[i].selected = true
        }
        if (data[i].children && data[i].children.length) {
          this.handleTreeSelectedAndDisabled(data[i].children)
        } else {
          delete data[i].children
        }
      }
    },

    /**
       * @method 点击单个树状的选中和取消
       */
    handleClickTreeNode (tag, val) {
      tag.selected = !tag.selected
      tag.disabled = !tag.disabled
      this.dialogFilerTreeData = this.handleTreeDataToOrdinaryData(this.copyAuthDataList).companys
      this.isIndeterminate = this.dialogFilerTreeData.length > 0 && this.dialogFilerTreeData.length < this.AuthTreeLength
      this.checkTreeAll = this.dialogFilerTreeData.length === this.AuthTreeLength
    },

    /**
       * @method 显示权限弹框
       */
    showBossDialog () {
      this.dialogAuth = true
      this.copyAuthDataList = this.deepCopy(this.authDataList)
      this.dialogFilerTreeData = this.handleTreeDataToOrdinaryData(this.copyAuthDataList).companys
      this.isIndeterminate = this.dialogFilerTreeData.length > 0 && this.dialogFilerTreeData.length < this.AuthTreeLength
      this.checkTreeAll = this.dialogFilerTreeData.length === this.AuthTreeLength
    },

    /**
       * @method 权限弹框确认按钮事件
       */
    bossAuthConfirm () {
      this.authDataList = this.deepCopy(this.copyAuthDataList)
      this.subForm.from_company_ids = this.handleTreeDataToOrdinaryData(this.authDataList).companys
      this.dialogAuth = false
      let id = this.subForm.company_id[this.subForm.company_id.length - 1]
      this.checkedCurrentCompanyId(this.authDataList, id)
    },

    /**
       * @method 删除权限弹框右边的公司部门
       */
    async deletcompanyOrDepartment (id) {
      let {
        copyAuthDataList
      } = this
      await this.deletedOneCompanyAuth(copyAuthDataList, id)
      this.dialogFilerTreeData = this.handleTreeDataToOrdinaryData(copyAuthDataList).companys
    },

    /**
       * @method 删除单个权限
       */
    deletedOneCompanyAuth (data, id) {
      for (let i = 0, len = data.length; i < len; i++) {
        if (data[i].id === id) {
          data[i].selected = false
          data[i].disabled = true
          return
        } else if (data[i].children && data[i].children.length) {
          this.deletedOneCompanyAuth(data[i].children, id)
        }
      }
    },

    /**
       * @method 权限全选
       */
    handleCheckTreeAllChange (val) {
      this.checkedAll(this.copyAuthDataList, val)
      this.dialogFilerTreeData = this.handleTreeDataToOrdinaryData(this.copyAuthDataList).companys
      this.checkTreeAll = val
      this.isIndeterminate = false
    },

    /**
       * @method 全选函数
       */
    checkedAll (data, flag) {
      data.forEach(item => {
        item.selected = flag
        item.disabled = !flag
        if (item.children && item.children.length) {
          this.checkedAll(item.children, flag)
        }
      })
    },

    /**
       * @method 关闭tags
       */
    async handleCloseTag (tag) {
      let {
        authDataList
      } = this
      await this.deletedOneCompanyAuth(authDataList, tag.id)
      this.subForm.from_company_ids = this.handleTreeDataToOrdinaryData(authDataList).companys
      let id = this.subForm.company_id[this.subForm.company_id.length - 1]
      this.checkedCurrentCompanyId(this.authDataList, id)
    },

    /**
       * @method 检查删除的权限是否被当前公司选中
       */
    checkedCurrentCompanyId (data, id) {
      for (let i = 0, len = data.length; i < len; i++) {
        if (data[i].id === id && data[i].disabled) {
          this.subForm.company_id = []
          return
        } else if (data[i].children && data[i].children.length) {
          this.checkedCurrentCompanyId(data[i].children, id)
        }
      }
    },

    /**
       * @method 深拷贝
       */
    deepCopy (data) {
      return JSON.parse(JSON.stringify(data))
    },

    /**
       * @method 提交表单信息
       */
    submitFormInfo () {
      let formArr = ['aForm', 'bForm', 'cForm', 'dForm', 'eForm', 'fForm', 'gForm', 'hForm', 'iForm']
      let flag = true
      for (let i = 0, len = formArr.length; i < len; i++) {
        this.$refs[formArr[i]].validate(valid => {
          if (!valid) {
            flag = false
            return false
          }
        })
      }
      if (flag) {
        let queryForm = JSON.parse(JSON.stringify(this.subForm))
        queryForm.avatar = queryForm.avatar.map(item => {
          return item.url
        })
        queryForm.images = queryForm.images.map(item => {
          return item.url
        })
        queryForm.my_video_cover = queryForm.my_video_cover.length > 0 ? queryForm.my_video_cover.map(item => {
          return item.url
        }) : []
        queryForm.vr_cover = queryForm.vr_cover.length > 0 ? queryForm.vr_cover.map(item => {
          return item.url
        }) : []
        queryForm.staff_id = this.id
        queryForm.from_company_ids = queryForm.from_company_ids.map(item => {
          return item.id
        })
        queryForm.company_id = queryForm.company_id[queryForm.company_id.length - 1]
        this.$api.editStaffCard(queryForm).then(res => {
          if (res.code === 200) {
            this.$message.success(this.$t('tips.successSave'))
            this.$router.go(-1)
          }
        })
        // } else {
        //   let isError = document.getElementsByClassName("is-error")
        //   isError[0].querySelector('input').focus()
      }
    },
    /**
       * @method 获取员工头像
       */
    getAvatar (imgs) {
      this.subForm.avatar = imgs
    },

    /**
       * @method 获取详情的轮播图
       */
    selectedFiles (imgs, key) {
      this.subForm[key].push(...imgs)
    },
    moveFiles (imgs, key) {
      this.subForm[key] = imgs
    },

    /**
       * @method 获取视频封面图
       */
    getVideoCover (imgs) {
      this.subForm.my_video_cover = imgs
    },

    /**
       * @method 获取VR封面图
       */
    getVRCover (imgs) {
      this.subForm.vr_cover = imgs
    },

    /**
       * @method 获取背景音乐
       */
    getBgMusic (file) {
      let len = file.length - 1
      this.subForm.bg = file[len].url
    },

    /**
       * @method 获取语音文件
       */
    getVoice (file) {
      let len = file.length - 1
      this.subForm.voice = file[len].url
    },
    /**
       * @method 获取视频文件
       */
    getVideo (file) {
      let len = file.length - 1
      this.subForm.my_video = file[len].url
    },
    goBack () {
      this.$router.back(-1)
    },
    filterNode (value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    }
  },
  watch: {
    filterTree (val) {
      this.$refs.tree.filter(val)
    },
    'subForm.from_company_ids' (newVal, oldVal) {
      console.log(newVal, oldVal)
      if (!oldVal.length && newVal.length) {
        this.$refs['basicform'].clearValidate('from_company_ids')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-edit-card {
  width: 100%;

  .el-form {
    // margin: 20px 0;

    .tag-box {
      width: 900px;

      .el-tag {
        margin-right: 5px;
      }
    }
  }

  .el-input {
    width: 300px;
  }

  .el-select {
    width: 300px;
  }

  .basic-form {
    .el-cascader,
    .el-select {
      // width: 300px;
      width: 435px;
    }

    .long-item {
      width: 435px;
      // width: 708px;
      margin-right: 6px;
    }
  }
  .relevant-form {
    padding-left: 80px;
    width: 900px;

    .el-input,
    .el-input-number {
      width: 160px;
    }
  }

  .upload-form {
    .el-input {
      width: 500px;
    }

    .item-tips {
      font-size: 12px;
      color: #aaafbb;
    }

    .item-short {
      width: 150px;
      margin-right: 10px;
    }
  }

  .set-form {
    .el-input {
      width: 500px;
    }
  }

  .auth-inner {
    display: flex;
    height: 400px;

    &-box {
      flex: 1;

      // background: #f60;
      &:last-child {
        border-left: 1px solid;

        > p {
          height: 40px;
          line-height: 40px;
          padding: 0 10px;
        }

        .data-box {
          padding: 0 20px;

          .department {
            // height: 300px;
            &-item {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 0 20px;
              margin-bottom: 10px;

              span {
                i {
                  color: #09f;
                }
              }

              i {
                cursor: pointer;
                display: inline-block;
                width: 16px;
                height: 16px;
                border-radius: 2px;
                font-size: 14px;
                text-align: center;
                line-height: 16px;

                &:hover {
                  background: #dcdfe6;
                }
              }
            }
          }
        }
      }

      .data-box {
        margin-top: 20px;
        height: 340px;
      }
    }
  }
}
</style>
